<script setup>
import requestUtil, {api} from "@/api/request.js";
import {ElMessage} from "element-plus";
import {ref, defineProps, onMounted} from "vue";

let orders = ref([]);
let props = defineProps({
  orderId: {
    type: Number,
    required: true
  }
});
const getOrderDetail = async () => {
  let res = await requestUtil.get("management/getOrderDetail/?orderId=" + props.orderId)
  if (res.data.code === 200) {
    orders.value = res.data.data;
    console.log(orders)
  }
};
onMounted(() => {
  getOrderDetail();
});
// 格式化下单时间
function formatOrderTime(orderTime) {
  const date = new Date(orderTime);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.toLocaleTimeString()}`;
}

function isLastOfSameGroup(index) {
  return (
      index === orders.value.length - 1 || orders.value[index].order_number !== orders.value[index + 1].order_number
  );
}
</script>

<template>
  <div>
    订单详情
    <div v-for="(item, index) in orders" class="order-item">
      <div class="order-id" v-if="isLastOfSameGroup(index)">
        <p>订单号：{{ item.order_number }}</p>
        <p>下单时间：{{ formatOrderTime(item.order_time) }}</p>
        <p>订单总价：￥{{ item.totalPrice }}</p>
      </div>
      <div class="item-info">
        <div class="item-image">
          <img :src="api.getServerUrl()+'media/dishes/'+item.dish_img" alt="item.name"/>
          <p class="item-name">{{ item.dish_name }}</p>
        </div>
        <p>{{ item.status_description }}</p>
      </div>

      <div class="item-details">
        <p class="item-price">¥{{ item.dish_price }} x {{ item.goods_num }}</p>
      </div>

      <!-- 单个订单总价 -->
      <div class="order-total">
        <p>总价：<span class="total-price">¥{{ item.dish_price * item.goods_num }}</span></p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #fff;
}

.order-item {
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-image {
  display: flex;
  align-items: center;
}

.item-image img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-right: 10px;
}

.item-image p {
  font-size: 30px;
}

.item-details {
  flex: 1;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
}

.item-price {
  color: #666;
}

.order-total {
  margin-top: 5px;
  font-size: 30px;
  text-align: right;
  font-weight: bold;
}

.total-price {
  color: #ff4d4f;
}

.order-countdown {
  margin-top: 10px;
  font-size: 14px;
  color: #f56c6c;
}

.order-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.order-actions button {
  margin-left: 10px;
  color: white;
  background: linear-gradient(90deg, #001dfb, #c70000, #8f36f5); /* 渐变背景 */
}

.order-timeout {
  font-size: 20px;
}
</style>